<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        
    }
    header{
        height: 44px;
        width: 100%;
        color: #333333;
        background-color: #F6F6F6;
        padding: 40px 0 30px;
    }
    .header-wrap{
        width: 1190px;
        margin: 0 auto;

    }
    header .logo{
        height: 100px;
        width: 100px;
        float: left;
    }
    header .nav{
        height: 100px;
        width: 300px;
        /* background-color: aqua; */
        float: right;
        z-index: 1;
        font-size: 12px;
        text-align: right;
        font: 12px/1.5;

    }
    header .nav-1{
        margin-top: 6px;
        display: block;
    /* margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px; */

    }
    .nav-1 span{
        color: #e6e6e6;
    margin: 0 10px;
    }
    .nav-1 .adxq{
        display: inline-block;
    margin-right: 10px;
    border: 1px #ddd solid;
    width: 74px;
    padding-right: 12px;
    height: 20px;
    text-align: right;
    line-height: 20px;
    border-radius: 12px;
    /* background-image: url(img/xq.png); */
    background: #fff url(../img/xq.png)  no-repeat 12px center;
}

    .h-logo{
        float: left;
        height: 44px;
        width: 200px;
    }

    #logo2{
        padding: 17px 0 0 17px;
    }
    main{
        background-color: #FAFAFA;
        width: 100%;
        padding: 40px 0 30px;
        min-height: 480px;
        font: 12px/1.5;
        position: relative;
        display: block;


    }
   


    .wrap{
        width: 1190px;
        height: 647px;
        /* position: relative; */
        font: 12px/1.5;
        clear: both;
        content: "\0020";
        border:1px #e8e7e7 solid;
        margin: 0 auto;
        display: block;
        background-color: #fff;

    }


    .form{
        padding: 30px 0 0 100px;
        width: 700px;
        float: left;
    }
    .r{
        float: right;
    }
    .message{
        margin-bottom: 30px;
        line-height: 38px;
    list-style: none;
    }
    .message p{
        margin-bottom: 15px;
    line-height: 38px;
    position: relative;
    display: block;
    }
    .message span{
        display: block;
        width: 140px;
    text-align: right;
    font-size: 14px;
    color: #333;
    padding-right: 6px;
    float: left;
    }
    .message input{
        font-size: 12px;
        height: 28px;
    line-height: 28px;
    border: 1px #e6e6e6 solid;

    padding: 0 10px;
    width: 220px;
    outline: 0;
    border-radius: 4px;

    }
    /* .message input .short{
    width: 159px;
    font-size: 12px;
        height: 28px;
    line-height: 28px;
    border: 1px #e6e6e6 solid;
    
    padding: 0 10px;
   
    outline: 0;
    border-radius: 4px;
} */
    .message label input{
      width: 13px;
      height: 13px;
   
    }
    .zc-btn{

        margin-left: 147px;
        margin-bottom: 40px;

    }

    .zc-btn .nreg {
    background: #e60000;
    width: 200px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    display: inline-block;
    border: 0;
    border-width: 0;
    cursor: pointer;
}
.r .r-logo{
    margin: 30px 80px 20px 0;
}
.r p{
    display: block;
    font-size: 18px;
    color: #666;
    padding-left: 79px;
    padding-top: 15px;
   
}
.r ul{
    display: block;
    width: 260px;
    padding: 0 75px 0 7px;
    list-style: none;
}
.r li{
    font-size: 12px;
    color: #999;
   
    float: left;
    padding-right: 15px;
    line-height: 24px;
    background: url(../img/yuanq.jpg) no-repeat 0 center;
    padding-left: 12px;
}
canvas{
    float: right;
}


.message p .form-error{border-color:red;}
.message p .form-true{border-color:rgb(27, 248, 27);}
.message p .true-tip{
    background: url(../img/zchc.png) no-repeat 0 0;
    float: right;
    line-height: 1.2;
    padding-left: 22px;
    height: 15px;
    margin-top: 12px;
    display: none;
}
.message p .error-tip{
    background: url(../img/zchc.png) no-repeat 0 0;
    line-height: 1.2;
    padding-left: 22px;
    height: 15px;
    margin-top: 12px;
    background-position: 0 -53px;
    color: red;
    float: right;
    width: 160px;
    display: none;
}

</style>
<body>
    <header>
        <div class="header-wrap">
            <div class="h-logo"><img src="../img/200x44.png" alt="中国供应商"></div>
            <div class="h-logo" id="logo2"><img src="../img/lgwz.png" alt=""></div>

        <div class="nav">
            <div class="nav-1">
                <a>登陆</a>
                <span>|</span>
                <a>中国供应商首页</a>
                <span>|</span>
                <a>客服中心</a>


            </div>
            <div class="nav-1">
                <a target="_blank" class="adxq">&nbsp联系QQ</a>
                服务热线：400-010-1866
            </div>
        </div>
        
<!--  -->
        </div>
    </header>
    <main>
         <div class="wrap">
            <div class="form">
                <div class="message">
                    <p><span>登录名：</span> 
                        <input type="text"  id="username" placeholder="4-12位数字或字母">
                    <span class="true-tip"></span>
                    <span class="error-tip">请输入4-20位数字或字母</span>
                    </p> 
                    <p><span>密码：</span>  
                        <input name="password" type="password" id="password" placeholder="6-20位字母加数字和符号，区分大小写"  >
                        <span class="true-tip"></span>
                        <span class="error-tip">请输入6-20位包含数字字母符号的密码</span>
                    
                    </p> 
                    <p><span>确认密码：</span>
                        <input type="password" id="password2" placeholder="请再次输入密码">
                        <span class="true-tip"></span>
                        <span class="error-tip">密码错误</span>
                    </p>
                    <p><span >姓名：</span>
                        <input type="text" id="name" placeholder="" class="short">性别：<label for=""><input type="radio"name="gender"value="0"checked="checked">先生</label><label for=""><input type="radio"name="gender"value="1">女士</label>
                        
                    </p>
                    <p><span>手机号：</span>
                        <input type="text" id="phone" placeholder="">
                        <span class="true-tip"></span>
                        <span class="error-tip">请输入11位手机号码</span>
                    </p>
                    <p><span >验证码：</span>
                        <input type="text" id="yanzheng" class="short" placeholder="">
                        <span class="true-tip"></span>
                        <span class="error-tip">请输入正确的验证码</span>
                        
                            <canvas width="160" height="45" id="captcha"></canvas>
                            <!-- <div class="form-group__message">请输入图形验证码</div> -->
                            
                    </p>
                   
                    <p><span >短信验证码：</span>
                        <input type="text"  id="phoneyz" class="short" placeholder="">
                        <span class="true-tip"></span>
                        <span class="error-tip">请输入正确的验证码</span>
                    </p>
                    
    
                </div>  
                <div class="zc-btn">
                    <button id="submitsub"type="button" class="nreg llly" style="display: none;">同意条款并注册</button>
                    <button id="graysubmitsub" class="nreg llly" style="background: rgb(204, 204, 204); display: inline-block;" type="button">同意条款并注册</button>
                    <br>


                    <input name="protocol" id="protocol" type="checkbox"><span>我已阅读</span>
                    <a href="https://cn.china.cn/aboutus/terms.html" data-scode="71850" target="_blank">《中国供应商服务条款》</a>
                    <span id="terms_info" class="erro alert-error asterisk" style="display: none;">请先阅读中国供应商服务条款</span>
                </div>
                


            </div>
            <div class="r">
                <div class="r-logo"><img src="../img/caigou.png" alt=""></div>
                <p>注册优势</p>
                <ul>
                    <li>询价快速响应</li>
                    <li>供应商报价 货比三家</li>
                    <li>优质商品随意挑选</li>
                </ul>



            </div>
        
        </div>
       

    </main>
    <footer></footer>
</body>
</html>

<script src="../js/jquery-3.4.1.js">


</script>

<script src="../js/captcha.js"></script>
<script>
    $(".short").css("width","138px");
    $("#username").blur(function(){
        
        let uname = $("#username").val();
        let reg = /[\da-zA-Z]{4,12}/;
        if(reg.test(uname)){
        
        // alert("成功")
        $(this).removeClass("form-error");
        $(this).addClass("form-true");
        $(this).next().next().attr('style','display:none');
        $(this).next().attr('style','display:block');
       

    //    $("#username").css.borderColor="green";
    }else{
        // alert("失败")
        $(this).removeClass("form-true");
        $(this).addClass("form-error");
        $(this).next().attr('style','display:none');
        $(this).next().next().attr('style','display:block');
    }
    })
    $("#password").blur(function(){
        
        let pwd = $("#password").val();
        let reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,20}$/;
        if(reg.test(pwd)){
        
        // alert("成功")
        $(this).removeClass("form-error");
        $(this).addClass("form-true");
        $(this).next().next().attr('style','display:none');
        $(this).next().attr('style','display:block');
       

    //    $("#username").css.borderColor="green";
    }else{
        // alert("失败")
        $(this).removeClass("form-true");
        $(this).addClass("form-error");
        $(this).next().attr('style','display:none');
        $(this).next().next().attr('style','display:block');
    }
    })
    $("#password2").blur(function(){
        
        let pwd2 = $("#password2").val();
        let pwd =  $("#password").val();
        // let reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,20}$/;
        if(pwd==pwd2){
        
        // alert("成功")
        $(this).removeClass("form-error");
        $(this).addClass("form-true");
        $(this).next().next().attr('style','display:none');
        $(this).next().attr('style','display:block');
       

    //    $("#username").css.borderColor="green";
    }else{
        // alert("失败")
        $(this).removeClass("form-true");
        $(this).addClass("form-error");
        $(this).next().attr('style','display:none');
        $(this).next().next().attr('style','display:block');
    }
    })
    
    $("#phone").blur(function(){
        
        let ophone = $("#phone").val();
        let reg =/^1[3-9]\d{9}$/;
        if(reg.test(ophone)){
        
        // alert("成功")
        $(this).removeClass("form-error");
        $(this).addClass("form-true");
        $(this).next().next().attr('style','display:none');
        $(this).next().attr('style','display:block');
       

    //    $("#username").css.borderColor="green";
    }else{
        // alert("失败")
        $(this).removeClass("form-true");
        $(this).addClass("form-error");
        $(this).next().attr('style','display:none');
        $(this).next().next().attr('style','display:block');
    }
    });


    $(()=>{
        let imgCode;
        let captcha = new Captcha({
        lineWidth: 1, //线条宽度
        lineNum: 2, //线条数量
        // dotR: 200, //点的半径
        // dotNum: 1000, //点的数量
        preGroundColor: [10, 80], //前景色区间
        backGroundColor: [150, 250], //背景色区间
        fontSize: 40, //字体大小
        fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'], //字体类型
        fontStyle: 'stroke', //字体绘制方法，有fill和stroke
        content: '0123456789', //验证码内容
        length: 4 //验证码长度


    });
    captcha.draw(document.querySelector('#captcha'), r => {
        console.log('验证码', r);
        imgCode = r;

        /* 自动触发标签的事件 */
        $("#imageCode").trigger("blur");
    });
    $("#yanzheng").blur(function(){
        
        let val = $("#yanzheng").val();
      
        // let reg = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,20}$/;
        if(val==imgCode){
        
        // alert("成功")
        $(this).removeClass("form-error");
        $(this).addClass("form-true");
        $(this).next().next().attr('style','display:none');
        $(this).next().attr('style','display:block');
       

    //    $("#username").css.borderColor="green";
    }else{
        // alert("失败")
        $(this).removeClass("form-true");
        $(this).addClass("form-error");
        $(this).next().attr('style','display:none');
        $(this).next().next().attr('style','display:block');
    }
    });

    });
    $("#protocol").click(function(){
        let isCheck = $("#protocol").is(":checked");
            console.log(isCheck)
        if (isCheck) {
            $("#graysubmitsub").attr('style','display:none')
            $("#submitsub").attr('style','display:inline-block')
        }
        else if(isCheck==false){
            $("#submitsub").attr('style','display:none')
            $("#graysubmitsub").attr('style','display:inline-block;background: rgb(204, 204, 204);')

           
        }
    })


   $("#submitsub").click(function(){
       
        /* [1] 检查表单验证是否全部都通过，如果有一个没有通过那么就return  */
        $("#username,#password,#password2,#yanzheng,#phone").trigger("blur");

        if ($(".form-error").length != 0) {
            alert("还有信息没填完")
            return;
        }
        let data = {
            username: $.trim($("#username").val()),

            phone: $.trim($("#phone").val()),
            password: $.trim($("#password").val()),
            password2: $.trim($("#password2").val()),
           name: $.trim($("#name").val()),
           
        }
        console.log("开始注册")
        // console.log(data)
        $.ajax({
            url: "../../server/php/zhuce.php",
            type: "POST",
            data:data,
            dataType: "json",
            headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'},
            // success:function(s){
            //    ss = JSON.parse(s)
            //    console.log(ss)
            //    console.log(s)
        //    }

         
        // }) .done(data => {
        //     console.log(data.status)
        //     if (ss.status == "success") {
        //         alert("注册成功!");
                
        //         location.href = "login.html";
        //     } 
        })

        alert("注册成功");
        location.href = "login.html";
   });
   


</script>